<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp" %>  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>首页_响应式</title>
		<link rel="stylesheet" type="text/css" href="${rootpath}/css/style.css"/>
	</head>
	<body>
		<header id="header">
			<div class="center">
				<h1 class="logo">测试旅行社</h1>
				<nav class="link">
					<h2 class="none">网站导航</h2>
					<ul>
						<li class="active"><a href="${rootpath}/tourServlet?method=main">首页</a></li>
						<li><a href="information.html">旅行<span class="xs-hidden">资讯</span></a></li>
						<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
						<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
						<li><a href="about.html">关于<span class="xs-hidden">公司</span></a></li>
					</ul>
				</nav>
			</div>
		</header>
		
		<div id="adver">
			<img src="${rootpath}/img/adver.jpg" alt="">
			<div class="center"></div>
			<div class="center copy">
				<input type="text" class="search" placeholder="请输入旅游景点或城市">
				<button class="button">搜索</button>			
			</div>
		</div>
		
		<div id="tour">
			<section class="center">
				<h2>热门旅游</h2>
				<p>国内旅游,国外旅游,自助旅游,油轮签证,主题旅游等各种最新的热门旅游推荐</p>
			</section>
			
			<!-- 图文并茂采用这个 -->
			<c:forEach items="${requestScope.goodsList }" var="goods" varStatus="stat">		
				<figure>
					<c:choose>
						<c:when test="${goods.imgPath != ''}">
							<img alt="曼谷-芭提雅6日游" src="${rootpath }${goods.imgPath }">
						</c:when>
						<c:otherwise>
							<img src="${rootpath}/img/no-pic.jpg">
						</c:otherwise>
					</c:choose>
					<figcaption>
						<div class="tour_title">
							<strong class="title">&lt;${goods.name }&gt;</strong>
							${goods.brief}
						</div>
						<div class="info">
							<em class="sat">满意度 77%</em>
							<span class="price">￥ <strong>${goods.price}</strong>起</span>
						</div>
						<div class="type">国内长线</div>
					</figcaption>
				</figure>
			</c:forEach>
			
			
		</div>
		
		<footer id="footer">
			<div class="top sm-hidden">
				<div class="block left">
					<h2>合作伙伴</h2>
					<hr>
					<ul>
						<li>途牛旅游网</li>
						<li>驴妈妈旅游网</li>
						<li>携程旅游</li>
						<li>中国青年旅行社</li>
					</ul>
				</div>
				<div class="block center">
					<h2>旅游FAQ</h2>
					<hr>
					<ul>
						<li>旅游合同签订方式？</li>
						<li>儿童价是基于什么制定的？</li>
						<li>旅游的线路品质怎么界定的？</li>
						<li>单房差是什么？</li>
						<li>旅游保险有那些种类？</li>
					</ul>
				</div>
				<div class="block right">
					<h2>联系方式</h2>
					<hr>
					<ul>
						<li>微博：weibo.com/ycku</li>
						<li>邮件：ycku@ycku.com</li>
						<li>地址：江苏盐城无名路123号</li>
					</ul>
				</div>
			</div>
			<div class="clearfix"></div>
			<div class="version sm-visible">
				客户端 | 触屏版 | 电脑版
			</div>
			<div class="bottom">
				Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号<span class="sm-hidden"> | 旅行社经营许可证：L-YC-BK12345</span>
			</div>
		</footer>
	</body>
</html>